import React from 'react';
import Chart from 'echarts-for-react';
// import {environmentalEmissionIndicatorsStatistics} from '../../../services/cockpit'
import request from '../../../utils/request';
let data = {
    value:[
            {
                series: [
                    {
                        data:[{
                            value : [10, 10, 20, 30, 50, 10,5],
                            name : '环保排放指标统计数据'
                        }]
                    }
                ],
            },
            {
                series: [
                    {
                        data:[{
                            value : [15, 30, 28, 35, 50, 19,50],
                            name : '环保排放指标统计数据'
                        }]
                    }
                ],
            },
        ],
    time:['01-01','01-02'],
    indicator: [
        { name: '00:00-04:00', max: 100},
        { name: '04:00-08:00', max: 100},
        { name: '08:00-12:00', max: 100},
        { name: '12:00-16:00', max: 100},
        { name: '16:00-20:00', max: 100},
        { name: '20:00-24:00', max: 100},
       
    ]
};

class CenterR extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            disList: {},
            groupSignId: '1'
        }

    }

    componentDidMount() {
        this.onsave('1')
    }


    componentWillReceiveProps(v) {

    }
    onsave = (val) => {
        // console.log(val)
        request({
            url: `/zhrq-web/cockpit/common/getRunAlarmData`,
            method: 'POST',
            data: { groupSignId: val }
        }).then(data => {
            // console.log(data)          
            if (data.rc === 0) {
                this.setState({
                    disList: data.ret
                })
            }
        })
    }

    setOption = () => {
        let myOption;
        let data = this.state.disList;
        // console.log(data)
        myOption = {
        baseOption: {
            textStyle:{color:'#fff'},
            color:['rgb(27, 138, 124)','#3A91B2','#4472C5',],
            tooltip: {
                confine:true,
            },
          
            timeline: {
                symbolSize:5,
                left:15,
                right:20,
                bottom:'0%',
                axisType: 'category',
                // realtime: false,
                // loop: false,
                autoPlay: true,
                // currentIndex: 2,
                playInterval: 3000,
                symbol:'circle',
                lineStyle:{
                    color:'#385883'
                },
                label:{color:'#fff'},
                itemStyle:{
                    color:'#385883'
                },
                checkpointStyle:{
                    color:'#fff',
                    borderColor:'#385883'
                },
                controlStyle:{
                    color:'#385883'
                },
                data: data.timeList,
            },
          
            radar: {
                radius:'40%',
                splitNumber:4,
                axisLine:{
                    show:false
                },
                splitLine:{
                    lineStyle:{
                        color:['#2BDDC2','#5BBEF2','#5BBEF2','#5BBEF2'],
                        width:1,
                    },
                },
                center:['50%','35%'],
                splitArea:{
                    show:false
                },
                name: {
                    textStyle: {
                        color: '#fff',
                        borderRadius: 3,
                        padding: [3, 5]
                    }
                },
                // indicator: [
                //     { name: '颗粒物', min: 50},
                //     { name: '噪音', min: 60},
                //     { name: '异味', min: 20},
                //     { name: '扬尘', min: 60},
                //     { name: '一氧化氮', min: 3},
                //     { name: '氯化氢', min: 2},
                //     { name: '氮氧化物', min: 120},
                // ],
                indicator: [
                    { name: '20-24时', max: 10},
                    { name: '16-20时', max: 10},
                    { name: '12-16时', max: 10},
                    { name: '8-12时', max: 10},
                    { name: '4-8时', max: 10},
                    { name: '0-4时', max: 10},   
                ]
                // indicator:data.indicator,
            },
            series: [{
                type: 'radar',
                position:'top',
                top:20,
                tooltip: {
                    trigger: 'item'
                },
                itemStyle: {normal: {areaStyle: {type: 'default',color:'#3A91B2',}}},
               
            }],
           
           
            // legend: {
            //    type:"plain",
            //    title:"环保标准"
            // },
        },
        options:data.alarmDate
    };
        return myOption;
    };
    render() {
        return (
          
                <Chart
                    option={this.setOption()}
                    notMerge
                    lazyUpdate
                    style={{ height: "80%", float: "left", width: "50%" }}
                />
           
        )
    }
}
export default CenterR;
